<template>
	<el-form ref="fileSystemFormRef" :rules="fileSystemRule" :model="fileSystemForm" label-width="110px">
		<el-form-item label="名称" prop="fsName">
			<el-input v-model="fileSystemForm.fsName" placeholder="请输入文件系统名称"></el-input>
		</el-form-item>
		<el-form-item label="元数据存储池" prop="metadataPool">
			<el-select-v2
				:loading="spingResouce&&spingData"
				style="width:100%"
				v-model="fileSystemForm.metadataPool"
				:options="metaDateList"
				placeholder="请选择元数据存储池"
			/>
		</el-form-item>
		<el-form-item label="数据存储池" prop="dataPool">
			<el-select-v2
				:loading="spingResouce&&spingData"
				style="width:100%"
				v-model="fileSystemForm.dataPool"
				:options="dateList"
				placeholder="请选择数据存储池"
			/>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { useStorageApi } from '/@/api/storage';
import { useFileStorageApi } from '/@/api/file-storage';

export interface FileSystemForm{
	fsName: string,
	metadataPool: string | null | undefined,
	metadataPoolId: string | null | undefined,
	dataPool: string | null
}
interface OptionItem{
  value: string,
  label: string,
	id:string
}

defineProps({
	value: {
		type: Boolean
	}
});

const storageApi = useStorageApi();
const fileStorageApi = useFileStorageApi();
const fileSystemFormRef = ref<FormInstance>();
const fileSystemRule = reactive<FormRules>({
	fsName: [{ required: true, message: '请输入文件系统名称', trigger: 'blur' }],
	metadataPool: [{ required: true, message: '请选择元数据存储池', trigger: 'blur' }],
	dataPool: [{ required: true, message: '请选择数据存储池', trigger: 'blur' }]
});
const fileSystemForm = reactive<FileSystemForm>({
	fsName: '',
	metadataPool: null,
	metadataPoolId: null,
	dataPool: null,
});
const metaDataOptions = ref<OptionItem[]>([]);
const dataOptions = ref<OptionItem[]>([]);

const metaDateList = ref<OptionItem[]>([]);
const dateList = ref<OptionItem[]>([]);

let spingResouce = ref(true);
let spingData = ref(true);

storageApi.getPoolList({
	'fileSystem': '',
	'pageNo': 1,
	'isAvailable': true,
	'pageSize': 100,
	'rbd': [],
	'poolType': 1
}).then(res => {
	metaDataOptions.value = res.data.records.map((item:any) => {
		return {
			value: item.poolName,
			label: item.poolName,
			id: item.poolId
		};
	}).filter((item:OptionItem) => item.label !== 'device_health_metrics');
	metaDateList.value = metaDataOptions.value.filter(element => element);
	spingResouce.value = false;
});

storageApi.getPoolList({
	'fileSystem': '',
	'pageNo': 1,
	'isAvailable': true,
	'pageSize': 100,
	'rbd': [],
}).then(res => {
	dataOptions.value = res.data.records.map((item:any) => {
		return {
			value: item.poolName,
			label: item.poolName,
			id: item.poolId
		};
	}).filter((item:OptionItem) => item.label !== 'device_health_metrics');
	dateList.value = dataOptions.value.filter(element => element);
	spingData.value = false;
});

const emits = defineEmits(['update:value', 'RefreshList']);
const createFileSystem = () => {
	if (!fileSystemFormRef.value) return;
	fileSystemFormRef.value?.validate((valid) => {
		if (valid) {
			fileStorageApi.addFileSystem({
				fsName: fileSystemForm.fsName,
				metadataPool: fileSystemForm.metadataPool,
				dataPool: fileSystemForm.dataPool }).then((res:any) => {
				!res.code && ElMessage.success(`创建文件系统${fileSystemForm.fsName}成功`);
				emits('update:value', false);
				emits('RefreshList');
			});
		}
	});
};

watch(fileSystemForm, (newvalue, oldvalue) => {
	metaDateList.value = metaDataOptions.value.filter(element =>
		element.label !== oldvalue?.dataPool
	);
	dateList.value = dataOptions.value.filter(element =>
		element.label !== oldvalue?.metadataPool
	);
});

defineExpose({
	createFileSystem
});

</script>

<style>

</style>